import ajax from '../../../utils/ajax'
import pop from '../common/pop/pop'
import upload from '../../../utils/upload'
import pophtml from './pop.tet'

//数据的新增功能
//载入pop后载入内容，调用pop的load方法将内容写入pop
const dialogForm = pop.load(pophtml).children[0]
//点击新增按钮时
dialogForm.onsubmit = function (e) {
  e.preventDefault()
  // 判断隐藏域的值如果有值就修改，无值就提交
  let url
  if (dialogForm.id.value) {
    url = '/api/manage/admins/modify'

  }
  else {
    url = '/api/manage/admins/reg'
  }
  const fd = new FormData(dialogForm)
  //upload用于处理上传文件
  upload(url, fd).then(result => {
    if (result.flag) {
      alert(`${dialogForm.btn.innerHTML}成功`)
      //关闭遮罩
      pop.hide()
      //重新渲染
      render()
    }
    else {
      alert(result.msg)
    }
  })
}

// 表单重置
let search = ''
let pagesize = 5
let pageindex = 1
export default init
function init() {

  //获取管理员列表并渲染
  render()
  //为新增按钮添加事件
  document.getElementById('admin_manage_add_btn').onclick = function (e) {
    //清空隐藏域
    dialogForm.id.value = ''
    //打开遮罩
    pop.show()
    //重置表单
    dialogForm.reset()
    //
    dialogForm.btn.innerHTML = '新增'
  }

  //获取需要的form表单
  const admin_manage_form = document.forms['admin_manage_form']

  //查找功能
  admin_manage_form.onsubmit = function (e) {
    e.preventDefault()
    //获取输入的值
    search = admin_manage_form.uid.value
    //返回第一页
    pageindex = 1
    //重新渲染
    render()
  }

  //重置查找内容
  admin_manage_form.onreset = function () {
    search = ''
    //返回第一页
    pageindex = 1
    //重新渲染
    render()
  }


}
async function render() {
  const result = await ajax('get', '/api/manage/admins/getlist', { search, pagesize, pageindex })
  const admin_manage_tbody = document.getElementById('admin_manage_tbody')
  admin_manage_tbody.innerHTML = ''
  result.data.forEach(item => {
    const tr = document.createElement('tr')
    const td1 = document.createElement('td')
    const td2 = document.createElement('td')
    const td3 = document.createElement('td')
    const td4 = document.createElement('td')
    const td5 = document.createElement('td')
    const td6 = document.createElement('td')
    td1.innerHTML = item.id
    td4.innerHTML = item.createTime
    td3.innerHTML = item.updateTime
    td2.innerHTML = item.username
    td6.innerHTML = `<img src = http://127.0.0.1:3000${item.avatar}>`
    td5.innerHTML = `<button data-id = ${item.id}  data-type = modify>修改</button><button data-id = ${item.id} data-type = delete>删除</button>`
    admin_manage_tbody.append(tr)
    tr.append(td1)
    tr.append(td2)
    tr.append(td3)
    tr.append(td4)
    tr.append(td5)
    tr.append(td6)

    //利用事件委托触发修改和删除按钮
    admin_manage_tbody.onclick = admin_manage_tbody_click

  })
}

async function admin_manage_tbody_click(e) {
  let id = e.target.dataset.id
  // 修改
  if (e.target.dataset.type == 'modify') {
    //给隐藏域一个值
    dialogForm.id.value = id
    //打开遮罩
    pop.show()
    dialogForm.btn.innerHTML = '修改'

    const result = await ajax('post', '/api/manage/admins/seek', { id })
    if (result.flag) {
      dialogForm.username.value = result.data.username
      dialogForm.password.value = result.data.password
    }
  }
  // 删除
  if (e.target.dataset.type == 'delete') {
    if (confirm('确定删除吗，不可复原！！！')) {
      const result = await ajax('delete', '/api/manage/admins/delete', { id })
      if (result.flag) {
        alert('删除成功')
        render()
      }
      else {
        alert('删除失败')
      }
    }
    else {
      alert('取消删除')
    }
  }
}